<html style="height: 100%"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工每月销售额</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>


<body style="height: 100%; margin: 0">
<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 80px">员工</label>
            <div class="layui-input-inline">
                <select name="sId" id="search_staff" lay-search="">
                    <option value="">请选择员工</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择年份:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="year"  readonly="readonly" placeholder="yyyy">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
    </div>
</form>
<!-- 搜索条件结束 -->

<div id="container" style="height: 100%" ></div>
<script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use([ 'jquery', 'layer', 'form', 'laydate'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem:'#year',
            type:'year',
            value:new Date()
        });

        $.ajax({
            url: "/admin/user/getStaff",
            success: function (res){
                var staffs = res.data;
                var html = "<option value=''>请选择员工</option>";
                $.each(staffs, function (index, item) {
                    html += "<option value='" + item.id + "'>" + item.name + "</option>";
                });
                $("#search_staff").html(html);
                form.render("select");
            },
            dataType: "json"
        });

        $("#doSearch").click(function(){
            getStaff();
        });
        function getStaff(){
            var staff = $("#search_staff").val();
            var year = $("#year").val();
            $.get("/admin/analysis/loadStaffYear",{year:year,staff:staff},function(data){
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                var option = null;
                option = {
                    title : {
                        text : '员工每月销售额',
                        left : 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data,
                        type: 'line'
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            })
        }
    });

</script>
</body>
</html>